﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SimilarProduct.ascx.cs"
    Inherits="Pub_Module_SimilarProduct" %>
<table width="100%" border="0" id="tblNavigate" onmouseover="fnDisplayOverImg()"
    onmouseout="fnDisplayOutImg()" cellpadding="0" cellspacing="1">
    <tr>
        <td align="left">
            <img src="../../Images/Icon/prev.png" border='0' onmouseover="fndelayOverMQ('left')"
                onmouseout="fndelayoutMQ('left')" id="imgPrev" style="visibility: hidden; display: none;
                cursor: pointer; position: absolute" />
        </td>
        <td width="100%">
            <marquee loop="-1" onmouseover="this.stop()" onmouseout="this.start()" width="100%"
                id="mqPD" scrolldelay="120"><asp:DataList id="dltPD" OnItemDataBound="dltPD_ItemDataBound" Width="100%" RepeatDirection="Horizontal" runat="server" CellPadding="5"><ItemTemplate>
                            <TABLE width="100%"  class="tbl_line_Similar" cellSpacing="0" cellPadding="0" border="0">
                            <TBODY>
                            <TR>
                            <TD id="td_top" class="td_line-x1" colSpan=3></TD>
                            </TR>
                            <TR>
                            <TD id="td_left" class="td_line-y1"></TD>
                            <TD style="BACKGROUND-COLOR: white">
                            <TABLE style="WIDTH: 180px" cellSpacing=0 cellPadding=2 border=0>
                            <TBODY>
                            <TR>
                            <TD vAlign=top align=center>
                            <a href='<%=ResolveUrl("~/Shopping/Stall/ProductDetail.aspx") %>?PDID=<%# Eval("PDID") %>' style="text-decoration:none">
                            <asp:Image id="imgNews" runat="server" Width="100px" CssClass="img_TopPD" Height="100px"></asp:Image>
                            </a>
                            </TD>
                            <TD vAlign=middle align=left colSpan=2></TD>
                            </TR>
                            <TR>
                            <TD vAlign=middle align=left colSpan=3>
                            <TABLE style="WIDTH: 100%" cellSpacing=0 cellPadding=0 border=0>
                            <TBODY>
                            <TR>
                            <TD style="WHITE-SPACE: nowrap" colSpan=3 align="center">
                            <a href='<%=ResolveUrl("~/Shopping/Stall/ProductDetail.aspx") %>?PDID=<%# Eval("PDID") %>' style="text-decoration:none">
                            <asp:Label id="hplTitle" Text='<%# LimitWord(Eval("PDName").ToString())%>' runat="server" CssClass="lbl_MostTitleProduct" ForeColor="Blue" ToolTip='<%# Eval("PDName") %>'></asp:Label> 
                            </a>
                            </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
                            </TD><TD class="td_line-y1"></TD></TR><TR><TD class="td_line-x1" colSpan=3></TD></TR></TBODY></TABLE>
                            
</ItemTemplate>
</asp:DataList></marquee>
        </td>
        <td align="left">
            <img src="../../Images/Icon/next.png" border='0' onmouseover="fndelayOverMQ('right')"
                onmouseout="fndelayoutMQ('right')" style="visibility: hidden; display: none;
                cursor: pointer" id="imgNext" /></td>
    </tr>
</table>
<asp:Label ID="lblEmpty" runat="server"></asp:Label>

<script language="javascript" type="text/javascript">
var flag=false;
function fndelayOverMQ(position)
{
     var MQ=document.getElementById("mqPD");
     MQ.scrollDelay="1";
     MQ.direction =position;
}
function fndelayoutMQ(position)
{
     var MQ=document.getElementById("mqPD");
     MQ.scrollDelay="120";
     MQ.direction =position;
}
function fnDisplayOverImg()
{
    var dltPD=document.getElementById("<%=dltPD.ClientID %>");
    if(dltPD.rows.lenght<=0) return;

    var imgPrev=document.getElementById("imgPrev");
    imgPrev.style.visibility="visible";
    imgPrev.style.display="block";
    
    var imgNext=document.getElementById("imgNext");
    imgNext.style.visibility="visible";
    imgNext.style.display="block";
    imgNext.style.position="absolute";
    if(flag==false)
    {
        imgNext.style.left=getX(imgNext)-30+"px";
        flag=true;        
    }
    
}
function fnDisplayOutImg()
{
    var imgPrev=document.getElementById("imgPrev");
    imgPrev.style.visibility="hidden";
    imgPrev.style.display="none";
    var imgNext=document.getElementById("imgNext");
    imgNext.style.visibility="hidden";
    imgNext.style.display="none";
    
}

 function getX( oElement )
{
    var iReturnValue = 0;
    while( oElement.offsetParent) {
    iReturnValue += oElement.offsetLeft;
    oElement = oElement.offsetParent;
    }
    return iReturnValue;
}
</script>

